<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%" border @selection-change="handleSelection" ref="multipleTable">
        <el-table-column type="selection" width="50" align="center" label="全选" prop="checked"></el-table-column>
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="name" label="商品" width="480"></el-table-column>
        <el-table-column prop="price" label="单价" width="180"></el-table-column>
        <el-table-column label="数量" width="180" prop="num">
            <template v-slot:default="scope">
                <el-input-number v-model="scope.row.num" :min="0" :max="10" label="描述文字" size="small"></el-input-number>
            </template>
        </el-table-column>
        <el-table-column prop="set" label="操作">
            <template v-slot:default="scope">
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="warning" size="small" @click="numReset(scope.$index)">重置</el-button>
                <el-button type="danger"  size="small" @click="handleDelect(scope.$index)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="totle_wrapper">
        <h3>总计{{totalPrice}}</h3>
        <h3>总数{{titleNum}}</h3>
    </div>
  </div>
</template>

<script>
export default {
    components:{
        
    },
    data() {
        return {
            checked:true,
            multipleSelection:[], // 存放已选择的数据
            tableData: [
                {

                    name: '麦肯锡问题分析与解决技巧',
                    price:34.60,
                    num:1,
                },
                {
                    name: '极简思维：颠覆传统思维模式的极简法则',
                    price:31.50,
                    num:1,
                },
                {
                    name: '沃顿商学院最受欢迎的思维课+谈判课+哈佛商学院最受欢迎的营销课+领导',
                    price:184.50,
                    num:1,
                }
            ]
        }
    },
    methods:{
        handleSelection(val){
            this.multipleSelection = val;
            console.log(this.multipleSelection)
        },
        handleDelect(index){
            this.tableData.splice(index,1);
        },
        numReset(index){
            this.tableData[index].num = 0;
        }
    },
    computed:{
        // 总价
        totalPrice(){
            let price_total = 0;
            for(let i=0;i < this.multipleSelection.length;i++){
                price_total += this.multipleSelection[i].price * this.multipleSelection[i].num;
            }
            return price_total;
        },
        titleNum(){
            let num_total = 0;
            for(let i=0;i < this.multipleSelection.length;i++){
                num_total += this.multipleSelection[i].num;
            }
            return num_total;
        }
    },
    mounted(){
        for(let i=0;i < this.tableData.length;i++){
            this.$refs.multipleTable.toggleRowSelection(this.tableData[i],true); //默认选中
        }
    }
}
</script>